<template>
  <div class="udp-container">
    <h1>UDP协议编辑器</h1>

    <div class="form-group">
      <!-- 目的IP地址输入 -->
      <div class="form-item">
        <label for="dstIp">请输入目的IP</label>
        <input id="dstIp" type="text" v-model="formData.dstIp" placeholder="255.255.255.255" class="form-control">
      </div>

      <!-- 源IP地址输入 -->
      <div class="form-item">
        <label for="srcIp">请输入源IP</label>
        <input id="srcIp" type="text" v-model="formData.srcIp" placeholder="255.255.255.255" class="form-control">
      </div>

      <!-- IP版本选择 -->
      <div class="form-item">
        <label for="ipVersion">IP版本选择</label>
        <select id="ipVersion" v-model="formData.ipVersion" class="form-control">
          <option value="IPV4">IPV4</option>
          <option value="IPV6">IPV6</option>
        </select>
      </div>

      <!-- 源端口输入 -->
      <div class="form-item">
        <label for="srcPort">请输入源端口</label>
        <input id="srcPort" type="number" v-model.number="formData.srcPort" min="0" max="65535" placeholder="0"
          class="form-control">
      </div>

      <!-- 目的端口输入 -->
      <div class="form-item">
        <label for="dstPort">请输入目的端口</label>
        <input id="dstPort" type="number" v-model.number="formData.dstPort" min="0" max="65535" placeholder="0"
          class="form-control">
      </div>

      <!-- 负载数据输入 -->
      <div class="form-item">
        <label for="payload">负载数据部分</label>
        <input id="payload" type="text" v-model="formData.payload" placeholder="660341124" class="form-control">
      </div>

      <!-- 发送次数输入 -->
      <div class="form-item">
        <label for="count">请输入发送次数</label>
        <input id="count" type="number" v-model.number="formData.count" min="1" class="form-control">
      </div>

      <!-- 发送按钮 -->
      <div class="form-item">
        <button @click="sendUdp" class="send-button">发送</button>
      </div>

      <!-- 通知区域 -->
      <div v-if="notification" class="notification" :class="notification.type">
        {{ notification.message }}
        <button @click="clearNotification" class="notification-close">&times;</button>
      </div>

      <!-- 结果显示区域 -->
      <div class="result-section">
        <label>发送结果</label>
        <div class="result-container">
          <textarea v-model="resultText" readonly class="result-textarea"></textarea>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 表单数据模型
const formData = reactive({
  dstIp: '255.255.255.255',
  srcIp: '255.255.255.255',
  ipVersion: 'IPV4',
  srcPort: 0,
  dstPort: 0,
  payload: '660341124',
  count: 5
})

// 结果显示文本
const resultText = ref('')

// 通知系统
const notification = ref<{
  message: string
  type: 'success' | 'error' | 'info'
} | null>(null)

// 显示通知
function showNotification(message: string, type: 'success' | 'error' | 'info' = 'info') {
  notification.value = { message, type }
  setTimeout(clearNotification, 3000)
}

// 清除通知
function clearNotification() {
  notification.value = null
}

// 发送UDP包
async function sendUdp() {
  // 验证IP地址格式
  const ipRegex = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3}$|^255\.255\.255\.255$/

  if (!ipRegex.test(formData.dstIp)) {
    showNotification('目的IP地址格式不正确！', 'error')
    return
  }

  if (!ipRegex.test(formData.srcIp)) {
    showNotification('源IP地址格式不正确！', 'error')
    return
  }

  // 验证端口范围
  if (formData.srcPort < 0 || formData.srcPort > 65535) {
    showNotification('源端口号必须在0-65535之间！', 'error')
    return
  }

  if (formData.dstPort < 0 || formData.dstPort > 65535) {
    showNotification('目的端口号必须在0-65535之间！', 'error')
    return
  }

  // 清空结果区域并添加处理中信息
  resultText.value = '正在发送UDP包...\n'

  try {
    // 模拟发送过程
    for (let i = 1; i <= formData.count; i++) {
      const response = await fetch('/api/send_udp', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({formData})
      })
      if (response.ok) {
        const timestamp = new Date().toLocaleTimeString()
        resultText.value += `[${timestamp}] 已发送第 ${i} 个UDP包: 目的IP=${formData.dstIp}, 源IP=${formData.srcIp}, 版本=${formData.ipVersion}, 源端口=${formData.srcPort}, 目的端口=${formData.dstPort}, 负载="${formData.payload}"\n`
      } else {
        resultText.value += `第${i}个UDP包发送失败: ${response.statusText}\n`
      }
      // 滚动到底部显示最新信息
      const textarea = document.querySelector('.result-textarea') as HTMLTextAreaElement
      if (textarea) {
        textarea.scrollTop = textarea.scrollHeight
      }
    }
    showNotification(`成功发送 ${formData.count} 个UDP包！`, 'success')
  } catch (error) {
    resultText.value += `发送失败: ${error instanceof Error ? error.message : '未知错误'}\n`
    showNotification('发送UDP包时出错！', 'error')
  }
}
</script>

<style scoped>
.udp-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #218838;
}

h1 {
  text-align: center;
  color: #343a40;
  margin-bottom: 25px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

label {
  font-weight: bold;
  color: #495057;
  margin-bottom: 5px;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.send-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  align-self: flex-start;
}

.send-button:hover {
  background-color: #0069d9;
}

/* 通知样式 */
.notification {
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
}

.notification-close {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
}

.notification.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.notification.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.result-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-container {
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
}

.result-textarea {
  width: 100%;
  height: 300px;
  padding: 10px;
  border: none;
  resize: none;
  font-family: monospace;
  background-color: #212529;
  color: #d4d4d4;
  line-height: 1.5;
}
</style>